<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>博客后台登录系统</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="<?=JS_PATH?>jquery.min.js"></script>
    <script type="text/javascript" src="<?=ASSETS?>layer/layer.js"></script>
    <style type="text/css">
        body
        {
            font: normal 14px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
        }
        div
        {
            display:block;
        }
        a
        {
            text-decoration:none;
            opacity: 1;
            color: #fff;
        }
        input,button{ outline:none; }
        ::-moz-focus-inner{border:0px;}   /*去除按钮点击时出现的虚线边框*/
        .login_bg
        {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image:url(<?=IMG_PATH?>bg_1.html);
            background-size: cover;
        }
        .login_header {
            position:absolute;
            top:0;
            left:0;
            right:0;
        }
        .container {
            position:relative;
            top:50%;
            margin: 0 auto;
            width: 260px;
        }
        #logo
        {
            display: block;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: white;
            height: 100%;
        }
        #subheading
        {
            position: relative;
            width: 517px;
            left: 50%;
            margin: 10px 0 16px -258px;
            font-size: 15px;
            font-weight: normal;
            color: #fff;
            text-align: center;
        }
        .signup_forms
        {
            width:260px;
            height:145px;
        }
        .signup_forms_container
        {
            width:260px;

            overflow: hidden;
            background: #fff;
            border-radius:3px;
        }
        .form_user,.form_password
        {
            width:260px;
            height:45px;
            margin:0px;
            padding:0px;
            border:0px;
        }
        .form_password{border-top: 1px solid #e3e3e3;}
        .signup_forms input
        {
            padding: 11px 10px 11px 13px;
            width: 100%;
            margin:0px;
            background: 0;
            font: 16px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
            border:0px;
        }
        #signup_forms_submit{
            margin-top:8px;
            width:260px;
            height:45px;
            background:#529ECC;
            border:0px;
            border-radius:3px;
            cursor:pointer;       <!--CSS属性设置鼠标为手型-->
        }
        #signup_forms_submit span
        {
            color: #fff;
            font: "Helvetica Neue",Arial,Helvetica,sans-serif;
            font-size:16px;
        }
        .footer
        {
            position: fixed;
            top: auto;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .footer_signup_link
        {
            position: absolute;
            width:141px;
            height:78px;
            bottom: 0;
            padding: 0 20px;
            margin: 0 0 13px 0;
            line-height: 25px;
            text-align: center;
            opacity: 1;
            color: #fff;
        }
        .signup_link
        {
            display: block;
            height: 45px;
            padding: 0 10px;
            margin: 0 0 8px 0;
            font-size: 16px;
            font-weight: bold;
            line-height: 45px;
            border: 0;
            border-radius: 2px;
            color: #fff;
            background: rgba(255,255,255,0.33);
        }
        .link
        {
            font-size: 14px;
            padding-right: 5px;
            margin-right: 12px;
            color: #fff;
        }
        .design_show
        {
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 0 12px;
            margin: 0 0 13px 0;
            line-height: 25px;
        }
        .designer_info
        {
            position: relative;
            color: #FFFFFF;
        }
        #face
        {
            margin: 0 0 0 10px;
            vertical-align: middle;
            border-radius:20px;
            padding: 0;
            height: 24px;
            width: 24px;
        }
    </style>
    <script type="text/javascript">

    </script>
</head>

<script>

    function show_err()
    {

        <?php if(!empty($error_message)):  ?>
        layer.msg("<?=$error_message?>");
        <?php endif; ?>
    }
    show_err();

    $(function()
    {


        //验证密码
        function check_password_formmat($val){
            var str=/^[0-9_a-zA-Z]{6,10}$/;

            if($val==""){
                throw new Error("请输入密码");
            }
            else{
                if(!str.test($val)){
                    throw new Error("密码格式错误");
                }
            }
        }

        //验证邮箱格式
        function check_email_format(val){

            var str= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

            if(val==""){
                throw new Error("请输入邮箱地址");
            }
            else{
                if(!str.test(val)){

                    throw new Error("邮箱格式错误");
                }
            }
        }

        //验证邮箱验证码不能为空
        function check_img_code($code) {
            if ($code == "") {
                throw new Error("请输入验证码");
            }
        }


         $("#signup_forms_submit").click(function()
         {
             var user_name = $("#user_name").val();
             var password = $("#password").val();
             var img_code = $("#img_code").val();
            try
            {
                check_email_format(user_name);
                check_password_formmat(password);
                check_img_code(img_code);

                $("#sign_form").submit();
            }
            catch(e)
            {
                layer.msg(e.message);
            }

         });



    });


</script>
<body>
<div id="login_bg" class ="login_bg" style="background-image:url(<?=IMG_PATH?>u3.jpg);"></div>
<div class="login_header">
    <span></span>
</div>

<div class="container">
    <div class="form_header">
        <h3 id="logo">博客登录</h3>
        <h2 id="subheading">学会探索与发现!</h2>
    </div>
    <div class="signup_forms" class="signup_forms">
        <div id="signup_forms_container" class="signup_forms_container">
            <form class="signup_form_form" id="sign_form" method="post" >
                <div class="signup_account" id="signup_account">
                    <div class="form_user">
                        <input type="text" name="user_name" value="<?=set_value("user_name")?>" placeholder="邮箱地址" id="user_name">
                    </div>
                    <div class="form_password">
                        <input type="password" name="password" value="<?=set_value("password")?>" placeholder="登录密码[1-6 字母/数字/下划线]" id="password">
                    </div>
                    <div class="form_password">
                        <input type="password" name="img_code" placeholder="验证码" id="img_code">
                    </div>
                    <div  class="form_password">
                        <label for="remember"><input id="remember" style="position: relative;left:-40%;margin-top: 5px;" type="checkbox" name="remember" />&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#727272;">记住密码?</span></label>
                    </div>

                </div>
        </div>
        <button type="button" id="signup_forms_submit"><span><strong>登录</strong></span></button>
        </form>
    </div>

</div>
</div>
<div class="footer">
    <div class="footer_signup_link">
        <a class="signup_link" href="<?=base_url()?>">博客首页</a>
    </div>
</div>
</body>
</html>